visibility: hidden y display: none

A muchos les será familiar estas propiedades porque las usaron para eliminar la barra de Blogger: visibility:hidden y display:none

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

La propiedad visibility con el valor hidden consigue hacer invisibles los bloques de cualquier elemento y muestra el bloque donde se encuentra.

La propiedad display con el valor none además de hacer invisibles los elementos no muestra el bloque donde se aloja y los elementos de su entorno se adaptan como si no existiera.

display permite varios valores:

inline block list-item run-in inline-block table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none inherit

visibility permite 4 valores:

visible hidden collapse inherit

Las capturas son pésimas pero vemos el efecto de estas propiedades aplicado al header.

Con visibility:hidden

No vemos el elemento pero deja un espacio visible del bloque que el resto de los elementos respetan.

#header-wrapper {

visibility:hidden;

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Con display:none

Ni vemos el elemento ni deja espacios y el resto de elementos se adaptan.

#header-wrapper {

display:none;

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Las dos propiedades pueden añadirse a cualquier elemento, un ejemplo sería al título del blog.

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Con display:none el título permanece en el mismo lugar pero no es visible y los elementos se adaptan.

#header h1 {

display:none;

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:lowercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Con visibility:hidden el título permanece en el mismo lugar pero no lo vemos y deja el espacio del bloque visible.

#header h1 {

visibility:hidden

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:lowercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Todo tuyo Pablo